<template>
    <div class="car-dispatch-detail">
        <div class="apply-info">
            <div class="info-item">
                <label>申请时间</label>
                <span>2024-10-11</span>
            </div>
            <div class="info-item">
                <label>申请人</label>
                <span>cc</span>
            </div>
            <div class="info-item">
                <label>手机号码</label>
                <span>18631288504</span>
            </div>
            <div class="info-item">
                <label>用车部门</label>
                <span>检务督察部</span>
            </div>
        </div>
        <div class="apply-info">
            <div class="info-item">
                <label>司机</label>
                <span>陈涛</span>
                <button class="reselect-button" @click="carTap">重选</button>
            </div>
            <div class="info-item">
                <label>电话</label>
                <span>15930816688</span>
            </div>
            <div class="info-item">
                <label>车牌</label>
                <span>冀OB196警</span>
            </div>

            <div class="info-item">
                <label>订单类型</label>
                <span>市内</span>
                <span class="icon iconfont icon-youjiantou"></span>
            </div>
            <div class="info-item">
                <label>起点</label>
                <span>河北省人民检察院</span>
            </div>
            <div class="info-item">
                <label>终点</label>
                <span>廊坊国家</span>
            </div>
            <div class="info-item">
                <label>开始时间</label>
                <span>2024-11-25 08:30</span>
                <div class="icon iconfont icon-shizhong"></div>
            </div>
            <div class="info-item">
                <label>结束时间</label>
                <span>2024-11-25 17:30</span>
                <div class="icon iconfont icon-shizhong"></div>
            </div>

        </div>
        <!-- 用车人信息 -->
        <div class="apply-info">
            <div class="info-item">
                <label>用车人数</label>
                <span>2</span>
            </div>
            <div class="info-item">
                <label>实际用车人</label>
                <span>刘振亮、武子璇</span>
            </div>
            <div class="info-item">
                <label>用车事由</label>
                <span>送达起诉书或意见书</span>
            </div>
            <div class="info-item">
                <label>备注</label>
                <span></span>
            </div>
        </div>

        <!-- 车队队长--选择车辆  -->
        <van-dialog v-model="show" show-cancel-button use-title-slot use-slot class="dialog"
            confirm-button-color="#333" :confirm="submitDialogTap" :cancel="cancleDialogTap">
            <div slot="title">选择车辆</div>
            <div class="add-body">
                <van-tabs type="card" :active="active" color="#1989fa" @click='tabsChange'>
                    <van-tab name='司机' title="司机&车辆"></van-tab>
                    <van-tab name='车辆' title="车辆"></van-tab>
                    <van-tab name='仅司机' title="司机"></van-tab>
                </van-tabs>
                <van-search v-model="search"
                    :placeholder="active == '司机' ? '车牌号、司机' : (active == '仅司机' ? '司机名称' : '车牌号')" background="#f5f5f5"
                    @search="onSearch" show-action @cancel="onCancel" />

                <div class="add-main-body">
                    <div v-if="active == '司机'">
                        <div v-for="item in carList" :key="item.id">
                            <div :class="{ active: curId == item.id }" class="chose-car " @click="carChoseTap(item.id)">
                                <img :src="item.vehicleImg" mode="" class="car-main-pic" />
                                <img src="@/assets/images/xuanzhong.png" mode="" v-if="curId == item.id"
                                    class="car-selected" />
                                <div class="chose-r">
                                    <div class="space-between f24">
                                        <span>{{ item.licenseNumber }}</span>
                                        <span style="color: #5277E0;">{{ item.vehicleModel }}</span>
                                    </div>
                                    <div class="space-between f22">
                                        <div >荷载人数：<span style="color:#1CBA58;"> {{ item.loadsNumber }}人</span></div> 
                                        <div>司机：{{ item.driverName }}</div>
                                    </div>
                                    <div class="space-between f22">
                                        <div>评分{{ item.score == null ? '' : item.score }}
                                            <van-rate readonly allow-half void-icon="star" void-color="#eee"
                                                v-model="item.score" size="16px" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="active == '车辆'">
                        <div v-for="item in carOnlyList" :key="item.id">
                            <div :class="{ active: curId == item.id }" class="chose-car" @click="carChoseTap(item.id)">
                                <img :src="item.vehicleImg" mode="" class="car-main-pic" />
                                <img src="@/assets/images/xuanzhong.png" mode="" v-if="curId == item.id"
                                    class="car-selected" />
                                <div class="chose-r">
                                    <div class="space-between f24">
                                        <span>{{ item.licenseNumber }}</span>
                                        <span style="color: #5277E0;">{{ item.vehicleModel }}</span>
                                    </div>
                                    <div class=" space-between f22">
                                        <div>
                                            荷载人数：<span style="color:#1CBA58 ;"> {{ item.loadsNumber }}人</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="active == '仅司机'">
                        <div v-for="item in personList" :key="item.id">
                            <div :class="{ active: curId == item.id }" class="chose-car" @click="carChoseTap(item.id)">
                                <img :src="item.driverPhoto" mode="" class="car-main-pic" />
                                <img src="@/assets/images/xuanzhong.png" mode="" v-if="curId == item.id"
                                    class="car-selected" />
                                <div class="chose-r">
                                    <div class="space-between f24">
                                        <span>{{ item.driverName }}</span>
                                        <span style="color: #5277E0;">{{ item.phone }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
            </div>
        </van-dialog>

    </div>
</template>


<script>
export default {
    name: "",
    data() {
        return {
            show: false,
            active: '司机',
            search: '',
            carList: [
                {
                    id: 1,
                    vehicleImg: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    licenseNumber: '冀A895L7',
                    vehicleModel: '大巴',
                    loadsNumber: '20',
                    driverName: '张志良',
                    score: 5

                }
            ],
            carOnlyList: [
                {
                    id: 1,
                    vehicleImg: 'https://img01.yzcdn.cn/vant/cat.jpeg',
                    licenseNumber: '冀A895L7',
                    vehicleModel: '大巴',
                    loadsNumber: '20'

                }
            ],
            personList: [
                {
                    id: 1,
                    driverPhoto: "https://img01.yzcdn.cn/vant/cat.jpeg",
                    driverName: '张志良',
                    phone: '15956235623'

                }
            ],
            curId: '1'
        }

    },
    methods: {
        //重选按钮
        carTap() {
            console.log("点击了重选按钮");

            this.show = true
        },
        //重选弹框-确定
        submitDialogTap() { }
        ,
        //重选弹框-取消
        cancleDialogTap() {

        },
        //重选-司机&车辆，司机，车辆
        tabsChange(e) {
            console.log(e);
            this.active = e
        },
        //重选弹框-搜索
        onSearch() {
        },
        //重选弹框-取消
        onCancel() {
        },
        //重选弹框-点击司机
        carChoseTap(id) {

        }

    }
}
</script>
<style scoped lang="scss">
@font-face {
    font-family: "iconfont";
    /* Project id 4762378 */
    src: url('//at.alicdn.com/t/c/font_4762378_l6z4jp5tvf.woff2?t=1732706673986') format('woff2'),
        url('//at.alicdn.com/t/c/font_4762378_l6z4jp5tvf.woff?t=1732706673986') format('woff'),
        url('//at.alicdn.com/t/c/font_4762378_l6z4jp5tvf.ttf?t=1732706673986') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-shizhong:before {
    content: "\e74f";
}

.icon-youjiantou:before {
    content: "\e633";
}
</style>

<style scoped lang="scss">
.car-dispatch-detail {
    padding: 16px;
    background-color: #f5f5f5;
    font-size: 14px;
}

// 申请人信息 公共样式
.apply-info {
    width: 98%;
    border: 2px solid #dedede;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 20px;

    .info-item {
        display: flex;
        height: 26px;
        line-height: 26px;
        padding: 12px 0;
        margin: 0 10px;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;

        label {
            color: #666;
            min-width: 70px;
            font-weight: 600;
            text-align: left;
            padding-left: 14px;
        }

        span {
            text-align: left;
            padding-left: 14px;
            flex: 1;
            color: #c3beb7;
        }

        // 右箭头 时钟图标
        .icon {
            text-align: right;
            margin-right: 15px;
            color: #c3beb7;
        }
    }
}

.reselect-button {
    padding: 4px 12px;
    background-color: #7c98ea;
    border: 1px solid #1890ff;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    margin-right: 10px;
}

.order-details {
    margin-top: 8px;
    background-color: #f7f7f7;
    border-radius: 4px;
    padding: 0 12px;
}

.order-details .info-item:last-child {
    border-bottom: none;
}

// 重选弹框
.dialog{
    box-sizing: border-box;
    width:  80%;
    margin: 0 auto;
}
.chose-car {
    display: flex;
    padding: 10px;
    margin: 10px;
    background: #F3F6FE;
    border: 1px solid #B4BDD5;
    position: relative;
}

.active {
    border: 1px solid #5395F0;
}

.car-main-pic {
    width: 70px;
    height: 50px;
    margin-right: 10px;
}

//选中
.car-selected {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 12px;
}

.add-body {
    padding: 15px 0;
    height: 320px;
    
    /* overflow: scroll; */
}
// 列表
.add-main-body {
    height: calc(100% - 50px);
    overflow: scroll;
}

.space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    align-items: center;
}
.chose-r {
  width: calc(100% - 80px);
}
.f24 {
    font-size: 12px !important;
}

.f22 {
    font-size: 12px !important;
}
</style>
